<template>
  <PageContainer>
    <view class="container">
      <Header title="选择接收人" :is-box-shadow="false">
        <template>
          <SearchInput @search="search" />
        </template>
      </Header>

      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :is-show-loadmore="dataList.length > 1"
      >
        <template v-for="item in dataList" :key="item.userId">
          <UserItem :userInfo="item" @openTips="openTips"></UserItem>
        </template>
      </Paglist>

      <TButtonGroup position="fixed" :styles="{ backgroundColor: '#FFF' }">
        <TButton
          v-if="parame.size === 999"
          class="gutter-btn"
          :text="isAllChecked ? '取消全选' : '全选'"
          custom-class="borderBtn"
          @click="selectAll"
        />
        <TButton
          class="gutter-btn"
          :text="`确认添加(${checkedUserList.length})`"
          type="primary"
          @click="confirm"
        />
      </TButtonGroup>

      <ShowModal v-model="tipsShow" title="异常提示" :showCancel="false">
        <template #content>
          <view class="px-20 pb-20">
            <view
              v-for="(item, index) in tipsContent"
              :key="index"
              class="mt-15"
              style="color: #aaabab"
            >
              <text v-if="tipsContent.length > 1">{{ index + 1 }}、</text>
              <text>{{ item }}</text>
            </view>
          </view>
        </template>
      </ShowModal>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* selectUserList 选择发送对象  */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import SearchInput from '../components/searchInput.vue';
  import UserItem from '../components/userItem.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { computed, provide, reactive, ref, unref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { getMemberList } from '@/api/admin';
  import type { MsgUserData, SearchUserData } from '@/api/admin/types';
  import { useAdminStoreWithOut } from '@/store/modules/admin';
  import { navigateBack, onLoad } from '@/router';
  import { Toast } from '@/utils';
  import { uniqBy, cloneDeep } from 'lodash-es';

  const useAdmin = useAdminStoreWithOut();
  // 已选择的用户列表
  const checkedUserList = computed(() => {
    return useAdmin.checkedUserList;
  });

  // 查询-用户列表
  provide('api', (obj: SearchUserData) => {
    obj.size = parame.size;
    return getMemberList(obj);
  });
  const parame = reactive<SearchUserData>({
    current: 1,
    size: 10,
    dataSource: 'userList',
    keyword: '',
    levelIds: [], // 职务
    industryIds: [], // 行业
    applyType: [], // 用户类型
    groupIds: [], // 用户标签
    memberStateIds: [], // 会员状态
    paymentStatusIds: [], // 缴费状态
    initRoleIds: [], // 单位身份
    objectId: undefined, // 关联对象
  });
  const [register, { refresh }] = useConList();
  const dataList = ref<MsgUserData[]>([]);
  // 关键词查询
  const search = (e: SearchUserData) => {
    parame.size = e.size;
    parame.keyword = e.keyword;
    parame.levelIds = e.levelIds;
    parame.industryIds = e.industryIds;
    parame.applyType = e.applyType;
    parame.groupIds = e.groupIds;
    parame.memberStateIds = e.memberStateIds;
    parame.paymentStatusIds = e.paymentStatusIds;
    parame.initRoleIds = e.initRoleIds;
    refresh && refresh();
  };

  onLoad((op) => {
    if (op.dataSource) {
      parame.dataSource = op.dataSource;
      parame.objectId = op.objectId; // 关联对象ID
    }
    refresh && refresh();
  });

  // 弹出异常提示框
  const tipsShow = ref(false);
  const tipsContent = ref<string[]>([]);
  const openTips = (list: string[]) => {
    tipsContent.value = list;
    tipsShow.value = true;
  };

  // 判断当前列表是否全选
  const isAllChecked = computed(() => {
    for (let i = 0; i < unref(dataList).length; i++) {
      const item = unref(dataList)[i];
      const checkedObj = unref(checkedUserList).find((v: any) => v.userId === item.userId);
      if (!checkedObj) {
        return false;
      }
    }
    return true;
  });

  // 全选 || 取消全选 当前筛选用户
  const selectAll = () => {
    if (unref(isAllChecked)) {
      cancelSelect();
    } else {
      let _list = [...unref(checkedUserList), ...unref(dataList)];
      useAdmin.checkedUserList = uniqBy(_list, 'userId'); // 选择用户去重
    }
  };
  // 取消当前筛选数据的选中状态
  const cancelSelect = () => {
    for (let i = 0; i < unref(checkedUserList).length; i++) {
      const item = unref(checkedUserList)[i];
      const checkedObj = unref(dataList).find((v: any) => v.userId === item.userId);
      if (checkedObj) {
        checkedUserList.value.splice(i, 1);
        i--;
      }
    }
  };

  // 确定添加
  const confirm = () => {
    if (!unref(checkedUserList).length) {
      Toast('请选择接收人');
      return;
    } else {
      navigateBack();
    }
  };
</script>

<style lang="scss" scoped></style>
